<template>
  <div class="time-piece-wrap">
    <call-set v-if="Show && !showTime" />
    <div v-if="showTime" class="time-tag-wrap">
      <span v-if="!showRing" class="time-tag">
        <span class="time-tag-name">通话中 :</span>
        <span class="time-tag-content">{{ callinTime }}</span>
      </span>
      <span v-else class="time-tag is-ringing">
        <span class="time-tag-name">振铃中 :</span>
        <span class="time-tag-content">{{ callinTime }}</span>
      </span>
      <el-button v-if="isHandle" type="danger" style="padding: 5px 15px;" class="handle" @click="handUp">挂断</el-button>
    </div>
    <span v-else class="time-tag is-idle">空闲中</span>
  </div>
</template>

<script>
import CallSet from '@/views/admin/other/components/CallSet'

import callCenter from './callWebSokets'
import Lockr from 'lockr'
import { LOCAL_CALL_AUTH_DATA } from '@/utils/constants.js'

export default {
  name: 'TimePiece',
  components: {
    CallSet
  },
  props: {
    isHandle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      phones: '',
      webSocketData: {},
      timer: null,
      timePiece: {}
    }
  },
  computed: {

    isManyCard() {
      return this.$store.state.crm.isCall
    },
    Show() {
      const callData = Lockr.get(LOCAL_CALL_AUTH_DATA)
      // hisUse 0 是默认硬呼单卡 1 是软乎 2是硬呼多卡
      if (this.$store.state.crm.isCall && callData && callData.hisUse == 2) {
        return true
      } else {
        return false
      }
    },
    // 接通再计时
    callinTime() {
      return this.$store.state.crm.callinTime
    },
    // 展示振铃
    showRing() {
      return this.$store.state.crm.showRing
    },
    // 展示通话
    showTime() {
      return this.$store.state.crm.showTimer
    }
  },
  watch: {
    phone(val) {
    },
    timerStatus(val) {
      this.starttimePiece(val)
    }
  },
  mounted() {
  },
  methods: {
    /**
       * 挂断
       */
    handUp() {
      const callData = Lockr.get(LOCAL_CALL_AUTH_DATA)
      if (callData && callData.hisUse == 3) {
        // 得助软乎
        callCenter.hangup()
      } else {
        callCenter.OnHungUp()
      }

      // callCenter.clearWebSoketsInterval()
    }
  }
}
</script>

<style lang="scss" scoped>
  .time-piece-wrap {
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .time-tag {
    display: inline-block;
    padding: 5px;
    margin: 0 8px;
    color: white;
    white-space: nowrap;
    background-color: #3e84e9;
    border-radius: 3px;

    &-wrap {
      white-space: nowrap;
    }

    &-name {
      width: 60px;
      line-height: 16px;
    }

    &-content {
      line-height: 16px;
    }

    &.is-ringing {
      background-color: #e6a23c;
    }

    &.is-idle {
      padding-right: 24px;
      padding-left: 24px;
      background-color: #00875a;
    }
  }

  .handle {
    margin-right: 8px;
  }
</style>
